<script setup>
import { computed } from 'vue'

const props = defineProps({
  textBg: String,
  textSm: String,
  color: {
    type: Array,
    default: ()=>{
      return ['#ffffff', '#60cbac']
    }
  }
})
const textBColor = computed(()=>{
  return props.color[0]
})
const textTColor = computed(()=>{
  return props.color[1]
})
</script>

<template>
  <div class="label-text" :style="{ '--text-b-color': textBColor,'--text-t-color': textTColor }">
    <span class="label-text-bg">{{ props.textBg }}</span><span class="label-text-sm">{{ props.textSm }}</span>
  </div>

</template>

<style scoped>
.label-text {
  background: linear-gradient(180deg, var(--text-b-color), var(--text-t-color));
  -webkit-background-clip: text; /* 将背景剪裁至文本 */
  -webkit-text-fill-color: transparent; /* 设置文本颜色为透明 */
  display: inline-block; /* 确保背景仅覆盖文本区域 */
  font-size: 24px;
  font-family: 'AliSemiBold';
}

.label-text-bg {
  font-size: 24px;
}

.label-text-sm {
  margin-left: 4px;
  font-size: 16px;
}
</style>
